<!DOCTYPE html>
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="sockjs-0.3.min.js"></script>
<script src="ReconnectingSockJS.js"></script>
<script src="ReconnectingWebSocket.js"></script>
<script src="stomp.js"></script>
<style>
	.box {
		width: 440px;
		float: left;
		margin: 0 20px 0 20px;
	}

	.box div, .box input {
		border: 1px solid;
		-moz-border-radius: 4px;
		border-radius: 4px;
		width: 100%;
		padding: 5px;
		margin: 3px 0 10px 0;
	}

	.box div {
		border-color: grey;
		height: 150px;
		overflow: auto;
	}

	div code {
		display: block;
	}

	#first div code {
		-moz-border-radius: 2px;
		border-radius: 2px;
		border: 1px solid #eee;
		margin-bottom: 5px;
	}

	#second div {
		font-size: 0.8em;
	}
</style>
<title>RabbitMQ Web STOMP Examples : Echo Server</title>
<link href="main.css" rel="stylesheet" type="text/css"/>
</head><body lang="en">
	<div id="first" class="box">
	<h2>Received</h2>
	<div></div>
	<form><input autocomplete="off" value="Type here..."></input></form>
	</div>

	<div id="second" class="box">
	<h2>Logs</h2>
	<div></div>
	</div>

	<script>
		var has_had_focus = false;
		var pipe = function(el_name, send) {
			var div  = $(el_name + ' div');
			var inp  = $(el_name + ' input');
			var form = $(el_name + ' form');

			var print = function(m, p) {
				p = (p === undefined) ? '' : JSON.stringify(p);
				div.append($("<code>").text(m + ' ' + p));
				div.scrollTop(div.scrollTop() + 10000);
			};

			if (send) {
				form.submit(function() {
					send(inp.val());
					inp.val('');
					return false;
				});
			}
			return print;
		};


	var ws = new ReconnectingWebSocket('ws://' + window.location.hostname + ':61614/stomp');
	ws.reconnectInterval=3000;
	var client = Stomp.over(ws);

	client.heartbeat.outgoing = 0;
	client.heartbeat.incoming = 0;
	client.debug = pipe('#second');

	var print_first = pipe('#first', function(data) {
		client.send('/topic/qdmmmdb', {}, data);
	});
	var on_connect = function(x) {
		id = client.subscribe("/topic/qdmmmdb", function(d) {
			print_first(d.body);
		});
	};
	var on_error =  function(msg) {
		console.log('error');
		if(/Lost connection to/.test(msg)){
			client.connect('guest', 'guest', on_connect, on_error, '/');
		}
	};
	client.connect('guest', 'guest', on_connect, on_error, '/');

	$('#first input').focus(function() {
		if (!has_had_focus) {
			has_had_focus = true;
			$(this).val("");
		}
	});
	</script>
</body></html>
